<template>
    <el-autocomplete v-model="infoName" valueKey="name" @blur="checkCurrent" :trigger-on-focus="true"
                     :fetch-suggestions="querySearchAsync" @mouseenter.native="isMouseEnter=true"
                     @mouseleave.native="isMouseEnter=false" :disabled="disabled" :placeholder="placeholder"
                     @select="handleAppSelect">
        <i class="el-input__icon" :class="infoName&&isMouseEnter&&!disabled?'el-icon-error':'el-icon-edit'"
           @click="handleClear" slot="suffix"></i>
        <template slot-scope="props">
            <div class="name">{{ props.item.cargoName }}</div>
        </template>
    </el-autocomplete>
</template>

<script>
    import CommonSearchInput from "./common";
    import { getHistoryCargoName } from "@/api/shipPlan/shipPlan";

    export default {
        mixins: [CommonSearchInput],
        props: {},
        methods: {
            // 异步搜索信息
            querySearchAsync(queryString, cb) {
                let iDisplayLength = 20
                this.infoName = queryString.toUpperCase()
                this.$emit("selectName", this.infoName)
                if (queryString.length > 1) {
                    getHistoryCargoName({
                        search_LIKE_cargoName: queryString,
                        iDisplayLength
                    }).then(res => {
                        if (res.data.aaData.length > 0) {
                            cb(res.data.aaData);
                        }
                    });
                }else{
                    cb([])
                }
            }
            ,
            handleAppSelect(item) {
                this.$emit("matchRecord", Object.assign({}, item));
                this.$emit("select", item.cargoName);
                this.$emit("selectName", item.cargoName);
                this.$emit("change", item.id);
                this.infoName = item.cargoName
            }
            ,
            handleClear() {
                if (this.infoName && !this.disabled) {
                    this.infoName = "";
                    this.$emit("select", "");
                    this.$emit("selectName", "");
                    this.$emit("change", "");
                }
            }
            ,
            checkCurrent() {

            }
        }
    };
</script>
